<template>
  <div class="sign-footer">
    <div class="color-wrapper">
      <button @click="$emit('changeColor', '#000')">black</button>
      <button @click="$emit('changeColor', '#f00')">red</button>
      <button @click="$emit('changeColor', '#0f0')">green</button>
      <button @click="$emit('changeColor', '#0f0')">green</button>
      <button @click="$emit('changeWidth', 1)">1</button>
      <button @click="$emit('changeWidth', 2)">2</button>
      <button @click="$emit('changeWidth', 4)">4</button>
      <button @click="$emit('changeWidth', 6)">6</button>
    </div>
    <div class="action-wrapper">
      <button @click="$emit('saveCanvas')">保存</button>
      <button @click="$emit('clearPartCanvas')">橡皮檫</button>
      <button @click="$emit('clearCanvas')">清空画布</button>
    </div>
  </div>
</template>

<script setup lang="ts">
defineEmits([
  "clearCanvas",
  "changeColor",
  "saveCanvas",
  "clearPartCanvas",
  "changeWidth",
]);
</script>

<style lang="scss" scoped>
.sign-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50px;
}

.color-wrapper,
.action-wrapper {
  display: flex;

  button {
    margin-right: 10px;
  }
}
</style>
